<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<script src="js/layui/layui.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
	</head>
	<style>
		html,
		body,
		.page {
			height: 100%;
			overflow: hidden;
		}
		
		body {
			font: normal 100% Helvetica, Arial, sans-serif;
			margin: 0;
			background-color: #eee;
		}
		
		.logo {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 6rem;
		}
		
		.logo img {
			width: 4rem;
			height: 4rem;
		}
		
		.headerbar {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 1rem;
		}
		
		.tool-bar {
			display: flex;
			justify-content: flex-end;
			width: calc(100% - 20rem);
		}
		
		.tool-bar ul {
			display: flex;
		}
		
		.tool-bar-li {
			padding: 0.4rem 1rem;
			height: 2rem;
		}
		
		.this-toolbar {
			color: #01AAED;
		}
		
		.content {
			height: calc(100% - 94px);
			overflow-y: auto;
		}
		
		::-webkit-scrollbar {
			width: 0 !important;
		}
		
		iframe {
			width: 100%;
			height: 100%;
			border: 0;
		}
	</style>

	<body>
		<div class="page">
			<!--导航条 begin-->
			<div class="headerbar">
				<div class="logo">
					<img src="img/logo.png" />
				</div>
				<div class="tool-bar">
					<ul id="navul">
						<li id="indexnav" class="tool-bar-li this-toolbar" onclick="ClickNav(this.id)">
							<span>首页</span>
						</li>
						<li id="productnav" class="tool-bar-li" onclick="ClickNav(this.id)">
							<span>产品展示</span>
						</li>
						<li id="casenav" class="tool-bar-li" onclick="ClickNav(this.id)">
							<span>产品应用</span>
						</li>
						<li id="aboutnav" class="tool-bar-li" onclick="ClickNav(this.id)">
							<span>关于我们</span>
						</li>
					</ul>
				</div>

			</div>
			<!--end-->

			<!--内容begin-->
			<div class="content">
				<iframe id="iframe" src="home.html"></iframe>
			</div>
			<!--end-->

		</div>
	</body>

</html>
<script>
	//导航点击
	function ClickNav(id) {
		$("#navul li").removeClass('this-toolbar');
		$("#" + id).addClass('this-toolbar');
		switch(id) {
			case 'indexnav':
				$("#iframe").attr('src', 'home.html');
				break;
			case 'productnav':
				$("#iframe").attr('src', 'product.html');
				break;
			case 'casenav':
				$("#iframe").attr('src', 'case.html');
				break;
			case 'aboutnav':
				$("#iframe").attr('src', 'about.html');
				break;
			default:

				break;

		}
	}
</script>